<template>
    <view class="page column">
        <hj-navbar title="完善信息" />
        <view class="form">
            <view class="bg big">
                <hj-image mode="aspectFill" src="home-bg.jpg" width="100%" height="100%" />
            </view>
            <view class="form-main pl-40 pr-40 pt-30 pb-50">
                <view class="FZGongYeHei t-w title mb-20">我们希望更加了解您！</view>
                <!-- 表单 start -->
                <up-form
                    labelPosition="left"
                    labelWidth="190rpx"
                    :labelStyle="labelStyle"
                    :model="formData"
                    ref="formRef"
                >
                    <up-form-item label="姓名：" prop="name">
                        <up-input
                            v-model="formData.name"
                            placeholder="请输入您的姓名"
                            :placeholderStyle="placeholderStyle"
                            maxlength="10"
                            :clearable="true"
                        ></up-input>
                    </up-form-item>
                    <up-form-item label="性别：">
                        <up-radio-group v-model="formData.gender">
                            <up-radio
                                class="pr-40"
                                :customStyle="{ marginRight: '16px' }"
                                v-for="(item, index) in radioGender"
                                :key="index"
                                iconSize="20rpx"
                                labelColor="#fff"
                                labelSize="30rpx"
                                :label="item.name"
                                :name="item.value"
                            >
                            </up-radio>
                        </up-radio-group>
                    </up-form-item>
                    <up-form-item label="身份证号码：" prop="idCard">
                        <up-input
                            v-model="formData.idCard"
                            placeholder="请输入您的身份证号码"
                            :placeholderStyle="placeholderStyle"
                            type="idcard"
                            maxlength="18"
                            :clearable="true"
                        ></up-input>
                    </up-form-item>
                    <up-form-item label="职业：" prop="occupation">
                        <up-input
                            v-model="formData.occupation"
                            placeholder="请输入您的职业"
                            :placeholderStyle="placeholderStyle"
                            maxlength="20"
                            :clearable="true"
                        ></up-input>
                    </up-form-item>
                    <up-form-item label="年龄：" prop="age">
                        <up-input
                            v-model="formData.age"
                            placeholder="请输入您的年龄"
                            :placeholderStyle="placeholderStyle"
                            type="number"
                            maxlength="3"
                            :clearable="true"
                        ></up-input>
                    </up-form-item>
                    <up-form-item label="手机号码：" prop="mobile">
                        <up-input
                            v-model="formData.mobile"
                            placeholder="请输入您的手机号码"
                            :placeholderStyle="placeholderStyle"
                            type="number"
                            maxlength="11"
                            :clearable="true"
                        ></up-input>
                    </up-form-item>
                </up-form>
                <hj-login @click="submit" @init="submit" class="center">
                    <view class="FZZongYi t-w submit ft-32">
                        <view class="flash-across"></view>
                        <view>点击完成调查问卷</view>
                        <view>领取超值报名折扣</view>
                    </view>
                </hj-login>
                <!-- 表单 end -->
            </view>
        </view>
        <view class="flex-auto w100 mt-6 image">
            <hj-image mode="aspectFill" src="data-bg.jpg" width="100%" height="100%" />
        </view>
    </view>
</template>

<script setup>
/**
 * @description 用户信息完善页面
 * @author yinzhi
 * @date 2025-03-10
 */
import { onReady } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { logger } from '@/utils/log.js'

// 表单数据
const formData = ref({
    name: '', //名字
    gender: 1, //性别 1:男 2:女
    idCard: '', //身份证号码
    occupation: '', //职业
    age: '', //年龄
    mobile: '' //手机号
})

// 提交事件
const submitEvent = async () => {
    try {
        console.log('完善信息成功')
        uni.showToast({
            title: '完善信息成功',
            icon: 'success',
            duration: 2000
        })
        let time = setTimeout(() => {
            uni.redirectTo({
                url: '/pages/marketing/questionnaire/index'
            })
            time && clearTimeout(time)
        }, 1000)
    } catch (error) {
        logger.error('[submitEvent]-完善信息失败：', errors)
    }
}

// 表单ref
const formRef = ref(null)
// 表单提交
const submit = () => {
    submitEvent()
    formRef.value
        .validate()
        .then(res => {
            submitEvent()
        })
        .catch(errors => {
            logger.log('表单提交错误：', errors)
        })
}
// 兼容微信小程序，通过setRules方法设置rules规则
onReady(() => {
    formRef.value.setRules(rules.value)
})

// 规则定义
const rules = ref({
    name: {
        type: 'string',
        required: true,
        message: '请输入姓名',
        trigger: ['blur', 'change']
    },
    idCard: [
        {
            required: true,
            message: '请输入身份证号码',
            trigger: ['change', 'blur']
        },
        {
            validator: (rule, value, callback) => {
                return uni.$u.test.idCard(value)
            },
            message: '请填入正确格式身份证号码',
            trigger: ['blur']
        }
    ],
    occupation: {
        type: 'string',
        required: true,
        message: '请输入职业',
        trigger: ['blur', 'change']
    },
    age: {
        type: 'string',
        required: true,
        message: '请输入年龄',
        trigger: ['blur', 'change']
    },
    mobile: [
        {
            required: true,
            message: '请输入手机号',
            trigger: ['change', 'blur']
        },
        {
            validator: (rule, value, callback) => {
                return uni.$u.test.mobile(value)
            },
            message: '请填入正确格式手机号',
            trigger: ['blur']
        }
    ]
})

// 性别选项
const radioGender = ref([
    { name: '男', value: 1 },
    { name: '女', value: 2 }
])

// 表单label样式
const labelStyle = {
    color: '#fff',
    fontSize: '30rpx'
}
const placeholderStyle = ref('color: #fff')
</script>

<style scoped lang="scss">
:deep(.u-form-item__body) {
    padding: 4rpx 0 10rpx !important;
    border-bottom: 1px solid rgba($color: #fff, $alpha: 0.6) !important;
    margin-bottom: 6rpx;
}
:deep(.u-input) {
    padding: 0 !important;
    font-size: 30rpx !important;
    color: #fff !important;
    height: 72rpx !important;
}
:deep(.u-input__content__field-wrapper__field) {
    color: #fff !important;
}
:deep(.u-input__content__field-wrapper__field::-webkit-input-placeholder) {
    color: #fff !important;
}
:deep(.u-radio) {
    margin: 0 !important;
    height: 72rpx !important;
    padding-right: 80rpx !important;
}

.flash-across {
    position: absolute;
    animation: changeImg 2s ease 0s;
    top: 0;
    width: 40%;
    height: 100%;
    content: '';
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-45deg);
    animation-iteration-count: infinite;
}
.form {
    position: relative;
    &-main {
        position: relative;
        z-index: 10;
        .title {
            font-size: 66rpx;
        }
        .submit {
            border: 6rpx solid #0075fc;
            line-height: 1.4;
            padding: 10rpx 60rpx;
            margin: 40rpx auto 0;
            letter-spacing: 8rpx;
            border-radius: 60rpx;
            position: relative;
            overflow: hidden;
            animation: zoom 2s infinite;
        }
    }
    .bg {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        opacity: 0.4;
    }
}
@keyframes zoom {
    0% {
        transform: scale(1);
        border: 6rpx solid hsla(212, 100%, 49%, 0.4);
    }
    50% {
        transform: scale(1.04);
        border: 6rpx solid #0075fc;
    }
    100% {
        transform: scale(1);
        border: 6rpx solid hsla(212, 100%, 49%, 0.4);
    }
}
@keyframes changeImg {
    from {
        left: -100%;
    }
    100% {
        left: 150%;
    }
}
</style>
